<template>
  <ElDrawer v-model="visible" size="80%" direction="ttb" :with-header="false">
    <!-- <span>{{ purchaseBill }}</span> -->
    <ElForm ref="form" label-width="auto">
      <!-- <ElRow><div>修改采购单</div></ElRow> -->
      <ElRow>
        <ElCol :span="8">
          <ElFormItem label="供货商">
            <ElInput v-model="purchaseBill.supplier"></ElInput>
          </ElFormItem>
        </ElCol>
        <ElCol :span="8">
          <ElFormItem label="单据状态">
            <div>{{ purchaseBill.billState }}</div>
          </ElFormItem>
        </ElCol>
        <ElCol :span="8">
          <ElFormItem label="采购单编号">
            <ElTag> {{ purchaseBill.billId }}</ElTag>
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :span="8">
          <ElFormItem label="订货日期" prop="orderDate">
            <ElDatePicker v-model="purchaseBill.orderDate"></ElDatePicker>
          </ElFormItem>
        </ElCol>
        <ElCol :span="8" :offset="8">
          <ElFormItem label="交货日期" prop="receiveDate">
            <ElDatePicker v-model="purchaseBill.receiveDate"></ElDatePicker>
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElDivider>details</ElDivider>
      <ElButton size="small" icon="Delete" type="danger" @click="removeItems()"></ElButton>
      <ElButton size="small" icon="Plus" type="success" @click="open4AddItems()"></ElButton>

      <ElTable
        ref="table"
        :data="purchaseBill.items"
        @selection-change="(rows:any) => selected=rows"
        show-summary
        :summary-method="summaryMethod"
      >
        <ElTableColumn type="selection" width="64" />
        <ElTableColumn label="物品编号" prop="goodsCode"></ElTableColumn>
        <ElTableColumn label="物品名称" prop="goodsName"></ElTableColumn>
        <ElTableColumn label="单价">
          <template #default="{ row }">
            <ElInputNumber size="small" v-model="row.price"></ElInputNumber>
          </template>
        </ElTableColumn>
        <ElTableColumn label="数量">
          <template #default="{ row }">
            <ElInputNumber size="small" v-model="row.quantity"></ElInputNumber>
          </template>
        </ElTableColumn>
        <ElTableColumn label="金额">
          <template #default="{ row }">
            <div>{{ (row.price * row.quantity).toFixed(2) }}</div>
          </template>
        </ElTableColumn>
      </ElTable>

      <ElDivider>operator</ElDivider>
      <ElRow>
        <ElCol :span="8">
          <ElFormItem label="经办人">
            <div>{{ account.nickname || purchaseBill.applier }}</div>
          </ElFormItem>
        </ElCol>
        <ElCol :span="8">
          <ElFormItem label="审核人">
            <div>{{ purchaseBill.auditor }}</div>
          </ElFormItem>
        </ElCol>
        <ElCol :span="8">
          <ElFormItem label="审核意见">
            <div>{{ purchaseBill.auditMsg }}</div>
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElButton type="primary" @click="modify()">保存修改</ElButton>
    </ElForm>
    <MaterialSupport ref="support" @post-add-items="postAddItems"></MaterialSupport>
  </ElDrawer>
</template>
<script lang="ts">
import { Material } from '@/entity/material.entity'
import { PurchaseBill, PurchaseItem } from '@/entity/purchase.entity'
import { accountStore } from '@/stores/account'

/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default defineComponent({
  name: 'PurchaseModify',
  emits:['postModify'],
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      visible: false,
      purchaseBill: {
        supplier: 'tesla实验室-SC099',
        orderDate: '2023-06-05T16:00:00.000Z',
        receiveDate: '2023-06-21T16:00:00.000Z',

        billId: 'PB16874060029610026',
        billState: 'toSubmit',

        amount: 4520.2,
        applier: 'zhangsan001',
        auditor: '',
        auditMsg: '',

        items: [
          {
            price: 12.05,
            quantity: 40,

            goodsCode: 'MT16828553890490023',
            goodsName: '开关',

            itemId: 0,
            billFk: 'PB16874060029610026',
            priority: 0
          },
          {
            itemId: 1,
            billFk: 'PB16874060029610026',
            priority: 1,
            goodsCode: 'MT16838823678220033',
            goodsName: '示波器',
            price: 2236,
            quantity: 2
          }
        ] as Array<PurchaseItem>,

        nextItemId: 2,
        applyTime: null,
        auditTime: null,
        history: '',
        updateTime: '2023-06-22T03:53:23.000Z'
      } as PurchaseBill,
      selected: [] as Array<PurchaseItem>
    }
  },
  computed: {
    ...mapState(accountStore, ['account'])
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    show(data: PurchaseBill) {
      this.purchaseBill = data
      this.visible = true
    },
    summaryMethod() {
      const r = []
      r[0] = '合计'
      let amount = 0
      this.purchaseBill.items.forEach((item) => {
        amount += item.price * item.quantity
      })
      r[5] = amount.toFixed(2)
      return r
    },
    open4AddItems() {
      const support: any = this.$refs.support
      support.show()
    },
    postAddItems(selected: Array<Material>) {
      // 第一步格式化material形态为 item形态
      // 第二步 合并新旧的item 按goodsCode取并集
      const r: Array<PurchaseItem> = selected.map((e: Material) => {
        const a = new PurchaseItem()
        a.goodsCode = e.materialCode
        a.goodsName = e.materialLable
        a.price = e.suggestPrice
        a.quantity = 1
        return a
      })
      const s = lodash.unionBy(this.purchaseBill.items, r, 'goodsCode')
      this.purchaseBill.items = s
    },
    removeItems() {
      const r = lodash.differenceBy(this.purchaseBill.items, this.selected, 'goodsCode')
      this.purchaseBill.items = r
    },
    async modify() {
      const res = await axios({
        method: 'put',
        url: '/purchase/modify',
        data: this.purchaseBill
      })
      this.$emit("postModify",1)
      this.visible=false;
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 1000px;
  margin-left: 160px;
}
</style>
